<template>
  <div class="box">
    <div class="login">
      <div class="left">
        <img src="../../../src/assets/images/login/submit.png">
      </div>
      <div class="right">
        <el-form label-position="top" label-width="100px" :model="allForm" style="max-width: 460px">
          <h3>用户资料完善</h3>
          <!-- 用户点击头像的div -->
          <div class="onUpload" @click="onUpload">
            <img v-if="imgSrc" :src="imgSrc">
            <img v-else src="../../../src/assets/images/login/Photo_Profile.png">
          </div>
          <input type="file" accept="image/png,image/gif" class="avatar" ref="fileDom" @change="onChange" />
          <el-form-item label="姓名">
            <el-input v-model.trim="allForm.uname" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model.trim="allForm.email" />
          </el-form-item>
          <el-form-item label="生日">
            <el-date-picker v-model="allForm.birthday" type="date" style="width: 100%" />
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model.number="allForm.phone" class="w-50 m-2" size="large" :prefix-icon="Search" />
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="allForm.region">
              <el-option value="男" />
              <el-option value="女" />
            </el-select>
          </el-form-item>
          <el-button @click="onAllData" type="info">提交</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, getCurrentInstance, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
// import axios from 'axios'
export default {
  setup() {
    const store = useStore()
    const allForm = reactive({
      uname: '',
      email: '',
      birthday: '',
      phone: '',
      region: ''
    })
    const { proxy } = getCurrentInstance()
    const fileDom = ref(null)
    const router = useRouter()
    const imgSrc = ref('')
    const onAllData = async () => {
      await proxy.$http.post('user/allData', {
        uname: allForm.uname,
        email: allForm.email,
        birthday: allForm.birthday,
        phone: allForm.phone,
        region: allForm.region
      }).then(({ data: res }) => {
        if (res.code !== 200) return ElMessage({
          message: '完善资料失败，请检查参数是否填写完整',
          type: 'error'
        })
        ElMessage({
          message: '完善资料成功',
          type: 'success'
        })
        // 跳转到登录页面
        router.push({
          name: 'login'
        })
      })
    }
    const onUpload = () => {
      // console.log(fileDom.value);
      fileDom.value.click()
    }
    const onChange = (e) => {
      let file = e.target.files[0]
      let imgUrl = window.URL.createObjectURL(file)
      if (imgSrc.value === imgUrl) return
      imgSrc.value = imgUrl
    }
    onMounted(() => {
      // 将vuex里的proxy转换为对象格式赋值给当前页面
      allForm.uname = JSON.parse(JSON.stringify(store.state.registerData)).uname
      allForm.email = JSON.parse(JSON.stringify(store.state.registerData)).registerEmail
    })
    return {
      allForm,
      Search,
      onAllData,
      onUpload,
      fileDom,
      onChange,
      imgSrc
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  position: absolute;
  top: 25%;
  left: 28%;
  width: 45%;
  height: 60%;
  max-width: 720px;
  max-height: 512px;
  min-width: 500px;
  min-height: 500px;

  .login {
    display: flex;
    width: 100%;
    height: 100%;

    .left {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #9A9AEB;
      width: 50%;
      height: 100%;
      // line-height: 600px;

      img {
        // margin: 40% 0;
        width: 80%;
      }
    }

    .right {
      // display: flex;
      // align-items: center;
      // justify-content: center;
      width: 50%;
      height: 100%;
      background-color: #fff;

      .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}

.el-button {
  width: 100%;
  margin-top: 5%;
  margin-bottom: 5%;
}

.el-form {
  margin: 2% 10%;
  // margin: 20% 10%;

  h3 {
    margin-top: 0;
    text-align: center;
  }

  .avatar {
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .onUpload {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
    // background-color: pink;

    img {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 50%;
      object-fit: cover;
    }
  }

  span {
    font-size: 14px;
  }
}

.el-select {
  width: 100%;
}

/deep/.el-form-item {
  margin-bottom: 0;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>